<!-- PracticeMarket.vue -->
<script lang="ts" setup>
import { usePracticeStore } from '@/stores/usePracticeStore'; // 引入 Pinia 实训数据 Store
import { computed } from 'vue';
import PracticeCard from './PracticeCard.vue'; // 导入 PracticeCard 组件

// 使用 Pinia 的 usePracticeStore 获取实训数据
const practiceStore = usePracticeStore();

// 使用 computed 计算属性，将实训数据映射为传递给 PracticeCard 所需的格式
const practiceApps = computed(() =>
  practiceStore.practices.map(practice => ({
    customPrimary: practice.customPrimary,
    practiceName: practice.practiceName,
    practiceIntroduction: practice.practiceIntroduction,
    practiceImage: practice.practiceImage || '/default-image.jpg', // 如果没有图片则使用默认图片
    practiceUrl: practice.practiceUrl,
  })),
);
</script>

<template>
  <div class="app-market" style="min-width: 1500px; max-width: 1550px; margin-left: -20px">
    <a-row :gutter="[60, 20]">
      <a-col v-for="(practice, index) in practiceApps" :key="index" :span="6">
        <PracticeCard :practice="practice" style="margin-left: 60px;margin-top: 20px;" />
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
/* 您可以根据需要调整样式 */
</style>
